<!DOCTYPE html>
<!-- saved from url=(0068)http://www.17sucai.com/preview/709282/2017-05-09/points/shopcar.html -->
<html lang="zh-CN" style="font-size: 34.722px;"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="/css/shop/base.css">
    <link rel="stylesheet" type="text/css" href="/css/shop/shopcar.css">
    <link rel="stylesheet" type="text/css" href="/css/shop/mui.min.css">
    <link rel="stylesheet" type="text/css" href="/css/shop/loaders.min.css">
    <link rel="stylesheet" type="text/css" href="/css/shop/loading.css">
    <link rel="stylesheet" type="text/css" href="/css/shop/layer.css">
	<link href="/js/shop/layer(1).css" type="text/css" rel="styleSheet" id="layermcss">
	<script src="/js/shop/rem.js"></script>
	<script src="/js/shop/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css" />
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
	<script src="/js/shop/layer.js"></script>
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<script src="/js/common.js"></script>
	<script type="text/javascript">
		$(function () {

            // 获取当前用户
            var user = JSON.parse(window.sessionStorage.getItem("user"));
            var userId = user.id;
            var totalCredit = 0 ;
            $.get('/items/' + userId + '/shopcar',function (data) {
                $('.item').renderValues({list: data},{
                    setValue:function (item,value) {
                        $(item).html(value)
                        var $credit = $(item).parent().parent().parent().prev();
                        var grade = $credit.text();
                        // 保留单价
                        $credit.attr("data-price",grade);
                        $credit.html(grade * value);
                    },
					// 保存购物车记录的id
					setId:function (item, value) {
                        $(item).attr('data-id',value);
                    }
				})

                // 商品加购物车数量
                $('.sub').click(function () {
                    var $count = $(this).next();
                    var parentDiv = $count.parent().parent().parent();
                    // 去单价
                    var single = parentDiv.prev().data('price');
                    var count = $count.text();
                    if(count > 1){
                        count--;
                    }else{
                        count = 1;
                    }
                    $count.text(count);
                    parentDiv.prev().html(count*single);
                });
                $('.plus').click(function () {
                    var $count = $(this).prev();
                    var parentDiv = $count.parent().parent().parent();
                    // 去单价
					var  single = parentDiv.prev().data('price');
                    var count = $count.text();
                    count++;
                    $count.text(count);
                    parentDiv.prev().html(count*single);
                   ;

                });


                $('input[type="checkbox"]').click(function() { // 找到勾选按钮，绑定事件
                    tatol();
                });

                $('.sub').click(function () {
                    tatol();
                });
                $('.plus').click(function () {
                    tatol();
                });

                var tatol = function() { // 计算总积分
                    var count = 0;
                    $('.list').map(function(index, item) {
                        var $el = $(item);
                        if ($el.find('input[type="checkbox"]').is(":checked")) {
                            count += parseFloat($el.find('.price').html()) * parseInt($el.find('.zuo li').eq(1).html());
                        }
                    });
                    if (count > 0) {
                        $('.settlement span').html(count + '积分');
                    }
                }

                $('.icon-lajixiang').click(function() { // 找到删除按钮，绑定点击事件
                    var self = this;
                    layer.open({
                        content: '确定删除？',
                        btn: ['确定', '取消'],
                        yes: function(index) {
                            $(self).parent().parent().parent().parent().remove();
                            layer.closeAll();
                            tatol();
                        }
                    });
                });
            });
		// 结算
			$('#account').click(function () {

                if($('input:checked').size() == 0){
                    $(document).dialog({
                        type : 'confirm',
                        style: 'ios',  // default、ios、android
                        titleText: '温馨提示',
                        content: '请选择要购买的商品!',
                    });
                }
                // 存放购物车记录id
				var shopCarIds = new Array();
                $.each($('input:checked'),function (index,value){
                    // 购物车记录
                    var id = $(this).data('id');
                    // 购买数量
                    var count = $(this).parent().parent().parent().parent().find('.count').html();
                    shopCarIds.push(id);
					// 修改购物车记录
					$.post('/items/user',{id:id,count:count},function (data) {
                        if(data.success){
                            window.location.href = '/mine/confirm.html';
                        }else{
                            $(document).dialog({
                                type : 'notice',
                                infoText: '操作失败,请检查您的网络...',
                                autoClose: 2500,
                                position: 'center'  // center: 居中; bottom: 底部
                            });

                        }
                    });
                })
                sessionStorage.setItem("shopCarIds",shopCarIds);
            });


        });
	</script>
</head>
<!--loading页开始-->
<body>
<div class="loading loader-chanage" style="display: none;">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	
		<!--header star-->
		<header class="mui-bar mui-bar-nav" id="header">
			<a class="btn" href="javascript:history.go(-1)">
	            <i class="iconfont icon-fanhui"></i>
	        </a>
	        <h4>购物车</h4>
	    </header>
	    <!--header end-->
	    <div class="item">
				<div class="warp warptwo clearfloat" render-loop="list">
					<div class="shopcar clearfloat">
						<div class="list clearfloat fl">
							<div class="xuan clearfloat fl">
								<div class="radio">
									<label>
										<input type="checkbox" render-fun="setId" data-id="" render-key="list.id" name="sel" value="">
									</label>
								</div>
							</div>
							<a href="javascript:void(0)">
								<div class="tu clearfloat fl">
									<span></span>
									<a href="">
									<img render-src="list.item.imageUrl"></a>
								</div>
								<div class="right clearfloat fl">
									<p class="tit over" render-html="list.item.description"></p>
									<p class="fu-tit over" render-html="list.params"></p>
									<p class="jifen over price" data-price=""  render-html="list.item.price"></p>
									<div class="bottom clearfloat">
										<div class="zuo clearfloat fl">
											<ul>
												<li class="sub"><img src="/img/shop/jian.jpg"></li>
												<li class="count"   render-fun="setValue" render-key="list.count"></li>
												<li class="plus"><img src="/img/shop/jia.jpg"></li>
											</ul>
										</div>
										<i class="iconfont icon-lajixiang fr"></i>
									</div>
								</div>
							</a>
						</div>
					</div>
				</div>
</div>
	    <!--settlement star-->
	    <div class="settlement clearfloat">
	    	<div class="zuo clearfloat fl box-s">
	    		合计：<span id="totalCredit"></span>
	    	</div>
	    	<a href="javascript:;" id="account" class="fl db">
	    		立即结算
	    	</a>
	    </div>
	    <!--settlement end-->
	    
		<!--footer star-->
	    <footer class="page-footer fixed-footer" id="footer">
			<ul>
				<li>
					<a href="/mine/shop.html">
						<i class="iconfont icon-shouye"></i>
						<p>首页</p>
					</a>
				</li>
				<li>
					<a href="/mine/itemcatalog.html">
						<i class="iconfont icon-icon04"></i>
						<p>分类</p>
					</a>
				</li>
				<li class="active">
					<a href="/mine/shopcar.html">
						<i class="iconfont icon-gouwuche"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="/mine/profiles.html">
						<i class="iconfont icon-yonghuming"></i>
						<p>我的</p>
					</a>
				</li>
			</ul>
		</footer>
		<!--footer end-->
		
	


</body></html>